<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-19 14:20:19
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-23 18:17:30
-->
<template>
    <div class="perfectBox">
        <div class="title">请完善个人资料</div>
        <div class="formBox">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="地区" prop="addressValue">
                    <el-cascader
                        v-model="ruleForm.addressValue"
                        :options="options"
                        @change="handleChange"
                        style="width:300px"
                        placeholder="请选择学校地区"
                    ></el-cascader>
                </el-form-item>

                <el-form-item label="学校">
                    <div @click="schoolDialogVisible = true" class="schoolName">
                        {{
                            ruleForm.schoolValue.school_name
                                ? ruleForm.schoolValue.school_name
                                : "请选择学校"
                        }}
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </el-form-item>

                <el-form-item label="版本" prop="visionValue">
                    <el-select
                        v-model="ruleForm.visionValue"
                        placeholder="请选择"
                        style="width:300px"
                    >
                        <el-option
                            v-for="item in visionOptions"
                            :key="item.textbook"
                            :label="item.textbookName"
                            :value="item.textbook"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年级" prop="gradeValue">
                    <el-select
                        v-model="ruleForm.gradeValue"
                        placeholder="请选择年级"
                        style="width:300px"
                    >
                        <el-option
                            v-for="item in gradeOptions"
                            :key="item.grade"
                            :label="item.grade_name"
                            :value="item.grade"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="row">
                    <el-button type="primary" @click="submitForm('ruleForm')"
                        >确认</el-button
                    >
                </div>
            </el-form>
        </div>
        <!-- //选择学校 -->
        <el-dialog
            title="选择学校"
            :visible.sync="schoolDialogVisible"
            width="40%"
        >
            <el-form :inline="true" label-width="50px">
                <el-form-item label="地区" prop="addressValue">
                    <el-cascader
                        v-model="ruleForm.addressValue"
                        :options="options"
                        @change="handleChange"
                        style="width:200px"
                        placeholder="请选择学校地区"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="搜索">
                    <el-input
                        placeholder="请输入学校名称"
                        style="width:200px"
                        v-model="school_name"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="searchSchool"
                        ></el-button>
                    </el-input>
                </el-form-item>
            </el-form>

            <el-table :data="schoolOptions" border style="width: 100%">
                <el-table-column
                    align="center"
                    prop="school_name"
                    label="学校名称"
                >
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleSchoolChange(scope.row)"
                            >选择</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="dialogFoot">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    @click="innerVisible = true"
                    >新增学校</el-button
                >
            </div>
            <el-dialog
                width="30%"
                title="新增学校"
                :visible.sync="innerVisible"
                append-to-body
            >
                <el-form
                    label-width="50px"
                    label-position="top"
                    :rules="rules2"
                    ref="ruleForm2"
                    :model="newAddSchool"
                >
                    <el-form-item label="请选择学校地区" prop="addressValue">
                        <el-cascader
                            v-model="newAddSchool.addressValue"
                            :options="options"
                            style="width:300px"
                            placeholder="请选择学校地区"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="学校名称" prop="schoolName">
                        <el-input
                            placeholder="请输入新学校名称"
                            style="width:300px"
                            v-model="newAddSchool.schoolName"
                        >
                        </el-input>
                    </el-form-item>
                    <div class="tips">
                        <div>说明：</div>
                        <div>
                            添加学校成功后，24小时内审核通过后显示在选择学校列表中。
                        </div>
                    </div>
                    <div class="dialogFoot">
                        <el-button
                            type="primary"
                            @click="addNewSchool('ruleForm2')"
                            >确认新增</el-button
                        >
                    </div>
                </el-form>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
import getCityData from "@/utils/getCityData";
import {
    getTextbookList,
    getExpectSchool,
    addNewSchool,
    getSign,
    saveSelectSchool
} from "@/api/perfect/perfect";
import { getUserInfo } from "@/api/login";
import util from "@/utils/utilsTools";
export default {
    data() {
        return {
            ruleForm: {
                addressValue: [],
                visionValue: "",
                gradeValue: "",
                schoolValue: ""
            },
            options: getCityData(), //地区数据
            visionOptions: [], //版本
            gradeOptions: util.getStage(999), //年级
            schoolOptions: [], //学校
            schoolDialogVisible: false,
            innerVisible: false,
            school_name: "", //搜索学校名称
            newAddSchool: {
                addressValue: [],
                schoolName: ""
            },
            sign: "", //签名
            rules: {
                addressValue: [
                    {
                        required: true,
                        message: "请选择地区",
                        trigger: "change"
                    }
                ],
                visionValue: [
                    {
                        required: true,
                        message: "请选择版本",
                        trigger: "change"
                    }
                ],
                gradeValue: [
                    {
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }
                ],
                shcoolValue: [
                    {
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }
                ]
            },
            rules2: {
                addressValue: [
                    {
                        required: true,
                        message: "请选择地区",
                        trigger: "change"
                    }
                ],
                schoolName: [
                    {
                        required: true,
                        message: "请填写学校名称",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.getbookList();
        this.Sign();
    },
    methods: {
        async Sign() {
            var query = {};
            var list = await getSign(query);
            console.log("获取签名：", list);
            if (list.code == 200) {
                this.sign = list.data.sign;
            }
        },
        async getbookList() {
            var query = {};
            var data = await getTextbookList(query);
            console.log("版本列表：", data);
            this.visionOptions = data.data;
        },
        async getSchool() {
            var query = {
                provinec_id: this.ruleForm.addressValue[0],
                city_id: this.ruleForm.addressValue[1],
                school_type: 1
            };
            var data = await getExpectSchool(query);
            console.log("学校列表：", data);
            this.schoolOptions = data.data;
        },
        async searchSchool() {
            var query = {
                school_type: 1,
                school_name: this.school_name
            };
            var data = await getExpectSchool(query);
            console.log("学校列表：", data);
            this.schoolOptions = data.data;
        },
        submitForm(formName) {
            if (!this.ruleForm.schoolValue.school_name) {
                return this.$message.error("请选择学校");
            }
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    var grade = this.ruleForm.gradeValue;
                    var education = "";
                    if (grade <= 6) {
                        education = 6;
                    } else if (grade > 6 && grade <= 9) {
                        education = 9;
                    } else {
                        education = 12;
                    }
                    var query = {
                        provinec_id: this.ruleForm.addressValue[0],
                        city_id: this.ruleForm.addressValue[1],
                        area_id: this.ruleForm.addressValue[2],
                        grade: grade,
                        schoolid: this.ruleForm.schoolValue.school_id,
                        education: education,
                        textbook: this.ruleForm.visionValue
                    };
                    var list = await saveSelectSchool(query);
                    console.log("选择好学校", list);
                    if (list.code == 200) {
                        var infoData = await getUserInfo({
                            k_token: this.$store.getters.k_token
                        });
                        if (infoData.code == 200) {
                            this.$store.commit(
                                "user/SETTING_USERINFO",
                                infoData.data
                            );
                            this.$router.replace("/home");
                        } else {
                            this.$router.replace("/");
                        }
                    } else {
                        this.$message.error(list.msg);
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleSchoolChange(item) {
            console.log(item);
            this.ruleForm.schoolValue = item;
            if (item.city_id != this.ruleForm.addressValue[1]) {
                console.log("学校是搜索的");
                var index1 = this.options.findIndex(el1 => {
                    return el1.value == item.provinec_id;
                });

                var index2 = this.options[index1].children.findIndex(el2 => {
                    return el2.value == item.city_id;
                });
                this.ruleForm.addressValue = [
                    item.provinec_id + "",
                    item.city_id + "",
                    this.options[index1].children[index2].children[0].value
                ];
            }
            this.schoolDialogVisible = false;
        },
        addNewSchool(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    var query = {
                        school_name: this.newAddSchool.schoolName,
                        provinec_id: this.newAddSchool.addressValue[0],
                        city_id: this.newAddSchool.addressValue[1],
                        area_id: this.newAddSchool.addressValue[2],
                        school_type: 1,
                        sign: this.sign
                    };
                    var list = await addNewSchool(query);
                    console.log("新增学校：", list);
                    if (list.code == 200) {
                        this.newAddSchool.addressValue = [];
                        this.newAddSchool.schoolName = "";
                        this.innerVisible = false;
                        this.$message({
                            message: "新增学校成功",
                            customClass: "customClass",
                            type: "success"
                        });
                    } else {
                        this.$message.error("该学校已存在！");
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleChange(value) {
            console.log(value);
            this.school_name = "";
            this.ruleForm.schoolValue = "";
            this.getSchool();
        }
    }
};
</script>

<style scoped lang="scss">
.perfectBox {
    width: 1000px;
    background: #ffffff;
    min-height: 800px;
    margin: 40px auto;
    padding: 60px 150px;
    box-sizing: border-box;

    .title {
        width: 100%;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #333;
        margin-bottom: 60px;
    }

    .formBox {
        width: 500px;
        margin: 0 auto;

        .schoolName {
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            width: 300px;
            text-align: center;
            cursor: pointer;

            &:hover {
                opacity: 0.6;
            }
        }
    }
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.dialogFoot {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.tips {
    margin-top: 8px;
    color: #949090;
}
</style>
